<%@ page contentType="text/html; charset=UTF-8"%>
<%@page import="com.sinodata.bsm.common.constants.RelationConstants"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>新增父子关系</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="cache-control" content="no-cache"/>
	<meta http-equiv="expires" content="0"/> 
	<%@ include file="../include/common.jsp"%>
	<%@ include file="../include/form.jsp"%>
	<%@ include file="../include/tree.jsp"%>
	  <style type="text/css">
		.ztree {margin-top: 5px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:280px;overflow-y:scroll;overflow-x:auto;}
	</style>
	<script type="text/javascript">
		 function cancel(){
		 	getTopWin(window).closejBox("resRelationWindow");
		 }
		 var resTreeConfig = {
			async: {
				enable: true,
				url : "${pageContext.request.contextPath}/resource/res-select-tree.action",
				dataType: "text",
				autoParam:["id"]
			},
			check: {
				enable: true,
				chkboxType:{ "Y" : "", "N" : "" }
			},
			callback: {
				onClick: resNodeClick,
				onCheck: zTreeOnCheck
			},
			view: {
				dblClickExpand: false,
				showLine: false
			}
		};
		function showResTree() {
			var cityObj = $("#resName");
			var cityOffset = $("#resName").offset();
		
			$("#resContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight()-20 + "px"}).slideDown("fast");
			$("body").bind("mousedown", onResTreeDown);
		}
		function resNodeClick(e, treeId, treeNode) {
			$("#relContent").fadeOut("fast");
			$("body").unbind("mousedown", onResTreeDown);
		}
		function onResTreeDown(event) {
			if (!(event.target.id == "body" || event.target.id == "resId" || event.target.id == "resContent" || $(event.target).parents("#resContent").length>0)) {
				$("#resContent").fadeOut("fast");
				$("body").unbind("mousedown", onRelTreeDown);
			}
		}
		function zTreeOnCheck(event, treeId, treeNode) {
    		setResValue();
		};
		function setResValue()
		{
			var rTree = $.fn.zTree.getZTreeObj("relResTree");
    		var nodes = rTree.getCheckedNodes(true);
    		var ids = "";
    		var names = "";
    		for(var i=0; i<nodes.length; i++){
    				n = nodes[i];
    				var arr = n.id.split("|");
    				if(arr[0]==2){
    					names += (i==0? n.name : (","+n.name));
    					ids += (i==0? arr[1] : (","+arr[1]));
    				}else{
    				    n.checked = false;
    				    rTree.updateNode(n);
    				 	getTopWin(window).getMessageBox().alert('资源类别不能被添加父子关系','提示');
    				 	return;
    				}
    		}
   			$("#resName").val(names);
 			$("#resId").val(ids);
		}
		
		function showRelTree() {
			var cityObj = $("#resRelName");
			var cityOffset = $("#resRelName").offset();
			var rTree = $.fn.zTree.getZTreeObj("relRelTree");
			var nodes = rTree.getSelectedNodes();
			if(nodes.length==0){
				var defaultNode = rTree.getNodeByParam("id", 102, null);
				rTree.selectNode(defaultNode);
			}
			$("#relContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
			$("body").bind("mousedown", onRelTreeDown);
		}
		function resetRelTree()
		{	var rTree = $.fn.zTree.getZTreeObj("relRelTree");
			var defaultNode = rTree.getNodeByParam("id", 102, null);
			rTree.selectNode(defaultNode);
			$("#resRelId").attr("value", defaultNode.id);
			$("#resRelName").attr("value",defaultNode.name);
		}
		function onRelTreeDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "resRelId" || event.target.id == "relContent" || $(event.target).parents("#relContent").length>0)) {
				$("#relContent").fadeOut("fast");
				$("body").unbind("mousedown", onRelTreeDown);
			}
		}
		function relNodeClick(e, treeId, treeNode) {
			$("#relContent").fadeOut("fast");
			$("body").unbind("mousedown", onRelTreeDown);
			$("#resRelId").attr("value", treeNode.id);
			$("#resRelName").attr("value",treeNode.name);
			$("#resRelName").blur();
			
		}
		//重置
		function dataReset(){
			var rTree = $.fn.zTree.getZTreeObj("relResTree");
			var nodes = rTree.getCheckedNodes(true);
			if(nodes.length>0){
				$.each(nodes,function(index,ob){
					ob.checked = false;
					rTree.updateNode(ob);
				});
			}
			//重置
			$('#relationForm')[0].reset();
		}
		var resRelTreeConfig = {
			async: {
				enable: true,
				url:"res-relation!typeTree.action",
				dataType: "text",
				autoParam:["id"]
			},
			callback: {
				onClick: relNodeClick
			},
			view: {
				dblClickExpand: false,
				showLine: false
			}
		};
		$(document).ready(function(){
			$.fn.zTree.init($("#relResTree"),resTreeConfig);
			$.fn.zTree.init($("#relRelTree"),resRelTreeConfig);
			
			
			$.formValidator.initConfig({formid:"relationForm",onerror:function(msg){},
										onsuccess:function(){
											 $.ajax({
													type:'post',
													url:'res-relation!batchSave.action?startId=${res.id}',
													data:$('#relationForm').serialize(),
													global:false,
													async:false,
													cache:false,
													dataType:'json',
													success:function(data,textStatus){
													        if(data.check=='true'){
																var relationWindow = getTopWin(window).currentWin['resRelationWindow'];
																relationWindow.refPage();
																cancel();
													        }else{
													        	getTopWin(window).getMessageBox().alert(data.checkInfo,'提示');
													        }
													},
													error:function(){
														getTopWin(window).getMessageBox().alert('服务器内部错误,请联系管理员','错误');
													}
				 		   					   });
				 		   					 
										     return false;
										}
			});
			
			$("#resName").formValidator({onshow:"请选择子资源",onfocus:"子资源为必选项"})
			            .inputValidator({min:1, onerror:"子资源为必选项"})
			            .functionValidator({
			            	fun:function(val,elem){
			            		var startId = '${res.id}';
			            		var resId = $('#resId').val();
			            		var resIds=resId.split(',');
			            		var flag = true;
			            		var errorInfo = '';
			            		$.each(resIds,function(index,ob){
			            			if(startId==ob){
				            			errorInfo = "第"+(index+1)+"个资源不能建立父子关系";
				            			flag = false;
				            			return false;
			            			}
			            		});
			            		
			            		if(flag==true){
			            			return flag;
			            		}else{
			            			getTopWin(window).getMessageBox().alert(errorInfo,'提示')
			            			return errorInfo;
			            		}
			            	}
			            });
			$("#label").formValidator({onshow:"请输入关系名称",onfocus:"请输入1-20个字符的关系名称"})
			          .inputValidator({min:1,max:20,onerror:"关系名称长度不正确"});
		});
	</script>
  </head>
  
  <body class="padding-8" >
    	<form  id="relationForm" name="relationForm" method="post">
    		<table class="table_eidt">
    			<tr>
    				<td class="td_left" style="width:120px;">父资源名称</td>
    				<td class="td_right" >${res.name}</td>
    			</tr>
    			<tr>
    				<td class="td_left" ><span class="span_alert">*</span>子资源</td>
    				<td class="td_right">
    					<input type="text" name="resName" id="resName" onfocus="showResTree(); return false;" class="input_text tree_res"/>
						<input type="hidden" name="resId" id="resId"  />	
	    				<span id="resNameTip" ></span>
    				</td>
    			</tr>
    			<tr>
    				<td class="td_left" ><span class="span_alert">*</span>与父资源关系</td>
    				<td class="td_right" >
    					<input type="text" name="resRelName" id="resRelName" readonly value="支撑" class="input_text tree_res" onfocus="showRelTree(); return false;"/>
    					<input type="hidden" name="resRelId" id="resRelId" value="<%=RelationConstants.SUPPORT %>" />
    					<span id="resRelNameTip"></span>
    				</td>
    			</tr>
    			<tr>
    				<td class="td_left" ><span class="span_alert">*</span>关系显示名称</td>
    				<td class="td_right">
    					<input type="text" name="label" id="label" class="input_text" />
    					<span id="labelTip"></span>
    				</td>
    			</tr>
    		</table>
    		<div  class="btn-div" >
    			<button type="submit" id ="saveBt" value="保存" class="btn-4" >保存</button>
    			<button type="button" onclick="dataReset()" class="btn-4" >重置</button>
    			<button type="button"  class="btn-4" onclick="cancel()" >取消</button>
    	</div>	
    	</form>
    <div id="resContent" class="menuContent" style="display:none; position: absolute;">
	  <ul id="relResTree" class="ztree" style="margin-top:0;padding-left:0;  width:200px; height:280px;  "></ul>
   </div>
   <div id="relContent" class="menuContent" style="display:none; position: absolute;">
	  <ul id="relRelTree" class="ztree" style="margin-top:0;padding-left:0;  width:195px; height:77px; "></ul>
   </div>
  </body>
</html>
